<template>
	<view>
		<view class="top_but">
			<view class="banmi_flex j-b">
				<view class="banmi_flex j-c a-c" style="width: 180rpx;height: 100rpx;">
					<text>编辑</text>
				</view>
				<view class="">
					<button @click="on_close" class="banmi_flex j-c a-c" style="width: 120rpx;height: 100rpx;">
						<text>关闭</text>
					</button>
				</view>
			</view>
		</view>

		<view style="padding:  0 20rpx;">
			<view class=" " style="padding: 10px 80px;">

				<view class="">



					<view class="p-20" style="border: solid 2rpx #DCDCDC;">
						<view class="  a-c  p-b-10">

							<view class=" ">
								<template v-if="item.value_type=='前端传值'">

									<view class="p-t-10" style="width: 400rpx;">
										<uni-easyinput v-model="item.placeholder">
										</uni-easyinput>
									</view>
								</template>

								<view class="p-t-10" style="width: 400rpx;">
									<uni-data-select isdata="data" :clear="false" :value="item.where"
										@change="field_where_list_where_where" :localdata="where_list"
										placeholder="条件类型">
									</uni-data-select>
								</view>
								<view class="p-t-10" style="width: 400rpx;">
									<uni-data-select isdata="data" :clear="false" :value="item.value_type"
										@change="field_where_list_where_val" :localdata="where_val" placeholder="值的类型">
									</uni-data-select>
								</view>
								<view v-if="item.value_type=='前端传值'" class="p-t-10" style="width: 400rpx;">
									<uni-data-select isdata="data" :value="item.input_box" :clear="false"
										@change="front_list_val" :localdata="front_list" placeholder="数据类型">
									</uni-data-select>
									<view class="p-t-10"
										v-if="item.input_box=='select'||item.input_box=='switch'||item.input_box=='checkbox'">
										<button size="mini" @click="on_select_set(item.input_box)"
											style="background-color: #1E90FF;width: 80px;">
											<text class="cff">设置选项</text>
										</button>
									</view>
								</view>
								<view v-if="item.value_type=='固定值'" class="p-t-10" style="width: 400rpx;">
									<uni-easyinput v-model="item.value" placeholder="请输入固定值">
									</uni-easyinput>
								</view>
								<view v-if="item.value_type=='后端生成'" class="p-t-10" style="width: 400rpx;">
									<uni-data-select isdata="data" :clear="false" :value="item.value"
										@change="field_where_list_where_value" :localdata="h_list_validate"
										placeholder="选择后端生成的值">
									</uni-data-select>
								</view>


								<view v-if="item.value_type=='前端传值'&&item.empty === 'false'" class="p-t-10"
									style="width: 400rpx;">
									<uni-data-select isdata="data" :value="item.verify" :clear="false"
										@change="field_where_list_where_verify" :localdata="q_list_validate"
										placeholder="选择验证条件">
									</uni-data-select>
								</view>
								<view v-if="item.value_type=='前端传值'&&item.empty === 'false'"
									class="p-t-10 banmi_flex a-c">
									<view class="" style="width: 400rpx;">
										<uni-easyinput :clear="false" v-model="item.verify_val" placeholder="示例:手机号">
										</uni-easyinput>
									</view>
									<text class="m-l-10 cred">不得为空</text>
								</view>
								<view v-if="item.value_type=='前端传值'&&item.empty === 'false'"
									class="p-t-10 banmi_flex a-c">
									<view class="" style="width: 400rpx;">
										<uni-easyinput :clear="false" type="number" v-model="item.max_number"
											placeholder="最大字数">
										</uni-easyinput>

									</view>
								</view>
							</view>
							<view class="" style="padding-top: 40px;">
								<button size="mini" @click="up_add_ok" style="background-color: #1E90FF;width: 80px;">
									<text class="  f-30 cff">确认</text>
								</button>
							</view>



						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择器设置组件 -->

		<diyListSelector ref="diyListSelector1" @change="change_diyListSelector">


		</diyListSelector>
	</view>
</template>

<script>
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'

	import provinceData from '@/components/fd-picker/city-china.json';
	import diyListSelector from './diy_list_selector.vue';
	export default {
		components: {
			diyListSelector
		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			windowHeight: {
				type: Number,
				default () {
					return 0;
				}
			},
			crud_type: {
				type: String,
				default () {
					return '';
				}
			},
			zhujian_id: {
				type: String,
				default () {
					return '';
				}
			},
			ziduan_list: {
				type: Array,
				default () {}
			},
			where_data_find: {
				type: Object,
				default () {}
			},
			windowWidth: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				find: {
					name: '',
				},
				provinceData: provinceData,
				start_val: '',
				close_val: '',
				checkbox_list: [{
					"text": "按钮",
					"value": 0
				}],
				where: 'where',
				//前端类型
				front_list: [{
						"value": 'text',
						"text": "单文本框", //ok
					},
					// {
					// 	"value": 'time',
					// 	"text": "时间选择",
					// },
					{
						"value": 'day',
						"text": "日期选择",
					},
					{
						"value": 'select',
						"text": "单列下拉框", //ok
					},
				],
				where_list: [{
						"value": '=',
						"text": "等于",
					},
					{
						"value": '>=',
						"text": "大于等于",
					},
					{
						"value": '<>',
						"text": "不等于",
					},
					{
						"value": '<',
						"text": "小于",
					},
					{
						"value": '<=',
						"text": "小于等于",
					},
					{
						"value": 'like',
						"text": "模糊查询搜索",
					}
				],
				where_val: [{
						"value": '固定值',
						"text": "固定值",
					},
					{
						"value": "前端传值",
						"text": "前端传值",
					},
					{
						"value": "后端生成",
						"text": "后端生成",
					},
				],
				ziduan_list1: [],
				h_list_validate: [],
				field_where_list: [{
					'field': '', //字段
					'where': '', //字段条件
					'value_type': '', //值类型
					'value': '', //值
					'empty': true, //true=可以为空 false不可以为空
					'verify': '', //验证类型
					'verify_val': '', //验证名称 如某某不得为空
					'verify_id': '',
					'max_number': '', //最大数字
				}],
				field_data_list: [],
				list_kong: [{
						"value": 'true',
						"text": "可以为空",
					},
					{
						"value": 'false',
						"text": "必须有值",
					},
				],
				q_list_validate: [],
				items_index: '',
				input_box_item: '',
				pass: {
					name: '提示',
					text: '确认通过审核吗?',
					cancellation: '取消',
					confirm: '确认',
				},
				item: {}


			}
		},
		mounted() {
			this.init();
			this.item = this.where_data_find;

		},


		methods: {
			on_select_set(item) {

				this.input_box_item = item;
				this.item['input_box_item'] = item
				this.$refs['diyListSelector1'].open(this.item);

			},
			change_diyListSelector(find) {
				this.item = find
			},

			front_list_val(item, index, isdata) {


				this.item['input_box'] = item
				if (item == 'select') {
					this.input_box_item = item;
					this.item['input_box_item'] = item
					this.$refs['diyListSelector1'].open(this.item);
				}

			},



			field_where_list_where_ziduan(item, index, isdata) {

				this.item['field'] = item
				this.item['key'] = item


			},
			field_where_list_where_where(item, index, isdata) {

				this.item['where'] = item
			},
			field_where_list_where_val(item, index, isdata) {

				this.item['value_type'] = item

			},
			field_where_list_where_value(item, index, isdata) {

				this.item['value'] = item
			},
			field_where_list_where_kong(item, index, isdata) {

				this.item['empty'] = item
			},
			field_where_list_where_verify(item, index, isdata) {
				this.item[index]['verify'] = item
				this.item[index]['verify_id'] = this.q_list_validate[item]['id']
			},
			init() {
				this.Banmikeji.PW_mysql_init_ajax().then(ret => {
					this.p_list = ret.data.p_list;
					this.q_list_validate = ret.data.q_list_validate;
					for (var i = 0; i < this.q_list_validate.length; i++) {
						this.q_list_validate[i]['text'] = this.q_list_validate[i]['name'];
						this.q_list_validate[i]['value'] = i;
					}


					this.h_list_validate = ret.data.h_list_validate;
					for (var i = 0; i < this.h_list_validate.length; i++) {
						this.h_list_validate[i]['text'] = this.h_list_validate[i]['name'];
						this.h_list_validate[i]['value'] = i;
					}

					for (var i = 0; i < this.p_list.length; i++) {
						this.p_list[i]['text'] = this.p_list[i]['plugin_name'];
						this.p_list[i]['value'] = this.p_list[i]['catalogue'];
					}
					this.table_info = ret.data.table_info;
					this.list = [];
					for (var i = 0; i < this.table_info.length; i++) {
						this.table_info[i]['text'] = this.table_info[i]['Name'];
						this.table_info[i]['value'] = this.table_info[i]['Name'];
						var reg = RegExp(/app_plugin/);
						if (reg.exec(this.table_info[i]['Name'])) {
							this.list.push(this.table_info[i]);
						}

					}


				})
			},
			change_where_val() {

			},
			change_where_ziduan() {

			},
			change_where() {

			},



			on_close() {
				this.popup.close()
			},
			up_add_ok() {
				this.$emit('img_ok', this.item)
				this.popup.close()
			},


		}
	}
</script>

<style>
	button {
		padding: 0;

		background: transparent;
	}

	.pass_0 {
		border: #C0C0C0 3px dashed;
		width: 465rpx;
	}

	.pass_0xz {
		border: solid 3px red;
		;
		width: 465rpx;
	}

	.xz_boxxx {

		align-items: center;

		width: 100%;
		/* 	border: red 3px dashed; */
		border: solid 3px red;
	}

	.boxxx {

		align-items: center;

		width: 100%;
		border: #C0C0C0 3px dashed;

	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>